<template>
  <div
    :class="[
      {
        [$style.activeHistory]: isHover,
      },
    ]"
  >
    <div v-if="inputVisible" :class="$style.CustomTagOuter">
      <el-input
        ref="InputRef"
        v-model.trim="inputValue"
        :maxlength="100"
        show-word-limit
        class="ml-1 w-20"
        size="small"
        @blur="exitEditWord()"
      />
      <!-- 执行时间mousedown 早于 blur 早于 click- -->
      <div :class="$style.opt">
        <el-icon @mousedown.stop="editWord()">
          <CircleCheck />
        </el-icon>
        <el-icon @mousedown.stop="exitEditWord()">
          <CircleClose />
        </el-icon>
      </div>
    </div>

    <div
      v-else-if="!inputVisible"
      :class="$style.CustomTagOuter"
      @click="activeItemClick()"
    >
      <el-icon>
        <ChatLineSquare />
      </el-icon>
      <div :class="$style.issueText" :title="editItem.title">
        {{ editItem.title }}
      </div>
      <div v-show="isHover" :class="$style.opt">
        <el-icon @click.stop="showInput">
          <Edit />
        </el-icon>
        <el-icon @click.native.stop @click="deleteHistoryItem">
          <Delete />
        </el-icon>
      </div>
    </div>
    <el-row :class="$style.dialog">
      <el-col :span="3"
        ><el-icon> <ChatLineSquare /> </el-icon
      ></el-col>
      <el-col :span="21">
        <div>中国食品公司排行榜</div>
      </el-col>
    </el-row>
    <el-row :class="$style.dialog">
      <el-col :span="3"
        ><el-icon> <ChatLineSquare /> </el-icon
      ></el-col>
      <el-col :span="21">
        <div>帮我写一个招聘简介，招聘的岗</div>
      </el-col>
    </el-row>
    <el-row :class="$style.dialog">
      <el-col :span="3"
        ><el-icon> <ChatLineSquare /> </el-icon
      ></el-col>
      <el-col :span="21">
        <div>你是一名跨境电商专家</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { defineProps, nextTick, watch, ref, computed } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDialogue } from '@/store/dialogue.store'

const useDialogueStore = useDialogue()
const props = defineProps({
  edit: {
    type: Object,
  },
  showIndex: {
    type: Number,
  },
})

const editItem = ref({})
const inputValue = ref('')
watch(
  () => props.edit,
  val => {
    editItem.value = val
    inputValue.value = val.title
  },
  {
    immediate: true,
  }
)

const inputVisible = ref(false)
const InputRef = ref(null)
const editWord = () => {
  if (!inputValue.value) {
    ElMessage.error('输入不能为空')
    return
  }
  editItem.value.title = inputValue.value
  useDialogueStore.updateHistoryItem(editItem.value)
  exitEditWord()
}
const exitEditWord = () => {
  inputVisible.value = false
  inputValue.value = ''
}
const showInput = () => {
  inputVisible.value = true
  inputValue.value = editItem.value.title
  nextTick(() => {
    InputRef.value.input.focus()
  })
}

const deleteHistoryItem = () => {
  if (
    editItem.value.historyId === useDialogueStore.activeHistory.historyId &&
    !useDialogueStore.isSendingVaild()
  ) {
    return
  }
  ElMessageBox.confirm('确定要删除？删除后不可恢复！', '警告！', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'info',
  })
    .then(async () => {
      useDialogueStore.deleteHistoryItem(editItem.value)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
const activeItemClick = () => {
  useDialogueStore.updateActiveHistory(editItem.value)
}
const isHover = computed(() => {
  return (
    editItem.value.historyId === useDialogueStore.activeHistory.historyId ||
    props.showIndex === editItem.value.historyId
  )
})
</script>
<style lang="scss" module>
.activeHistory {
  background: #f5f5f5;
  width: 100%;

  .dialog {
    padding: 0px 10px;
    margin: 20px 0px;
  }
}

.CustomTagOuter {
  color: #111;
  padding: 0px 14px;
  box-sizing: border-box;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;

  i {
    margin-top: 2px;
    color: #3838b6;
    font-size: 16px;
    padding: 3px;
    display: flex;
    align-items: center;
  }

  div[class~='el-input__wrapper'] {
    padding: 0px;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 0 0 0px;
  }

  input[class~='el-input__inner'] {
    color: #111 !important;
  }

  span[class~='el-input__count-inner'] {
    position: relative;
    bottom: -5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0) !important;
    color: #111;
    font-size: 8px;
  }

  .issueText {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .opt {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-basis: 40px;
    height: 100%;
    margin-left: 5px;

    i {
      color: #111;
      font-size: 16px;
      padding: 3px;
    }

    i:hover {
      background-color: #fff;
      border-radius: 4px;
    }
  }
}
</style>
